<template>
	<view class="wanlshop-category-container">
		<!-- 导航条 -->
		<view class="cu-custom" :style="{ height: $wanlshop.wanlsys().height + 'px' }">
			<view class="cu-bar fixed top-bg solid-bottom" :style="{
					height: $wanlshop.wanlsys().height + 'px',
					paddingTop: $wanlshop.wanlsys().top + 'px'
				}">
				<!-- <view class="action" @tap="handleGroups"> -->
					<!-- <text class="wlIcon-pintuan3"></text> -->
					<!-- <view class="cu-tag badge">拼</view> -->
				<!-- </view> -->
				<view class="search-form round">
					<image
						class="search-img"
						:src="$staticImagePath('home/search.png')"
					/>
					
					<swiper class="search-swiper placeholder" vertical autoplay circular interval="3000">
						<swiper-item @tap="productSearch('')">请输入搜索药品</swiper-item>
						<swiper-item v-for="(item, index) in common.modulesData.searchModules" :key="item.keywords"
							@tap="productSearch(item.keywords)">
							{{ item.keywords }}
						</swiper-item>
					</swiper>
				</view>
				<!-- #ifndef MP -->
				<view class="action" @tap="showModal('menu')">
					<text class="wlIcon-gengduo"></text>
					<!-- {{( statistics.notice.notice + statistics.notice.order + statistics.notice.chat + statistics.order.pay + statistics.order.delive + statistics.order.receiving + statistics.order.evaluate + cart.cartnum )}} -->
					<view class="cu-tag badge bg-orange" v-if="
							statistics.notice.notice +
								statistics.notice.order +
								statistics.notice.chat +
								statistics.order.pay +
								statistics.order.delive +
								statistics.order.receiving +
								statistics.order.evaluate +
								cart.cartnum >
								0
						"></view>
				</view>
				<!-- #endif -->
			</view>
		</view>
		<!-- 加载类目 -->
		<wanl-shop-classify :mainHeight="height" :categoryStyle="parseInt(common.appStyle.category_style)"
			:categoryData="common.modulesData.categoryModules" :adverData="common.adData.categoryAdverts" />
		
		<!-- 模态框 -->
		<view class="WANL-MODAL" @touchmove.stop.prevent="moveHandle">
			<view class="cu-modal top-modal" :class="modalName == 'menu' ? 'show' : ''" @tap="hideModal()">
				<view class="wanl-modal-menu cu-dialog" @tap.stop="">
					<wanl-direct @change="hideModal" />
				</view>
			</view>
			<!-- 分享 -->
			<view class="cu-modal wanl-share bottom-modal" :class="modalName == 'share' ? 'show' : ''"
				@tap="hideModal()">
				<view class="cu-dialog" @tap.stop="">
					<wanl-share ref="wanlShare" page="pages/category" :scene="{qr:'c'}"
						:scrollAnimation="scrollAnimation" @change="hideModal" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import wanlShopClassify from '@/components/wanl-shop/classify';
	export default {
		data() {
			return {
				height: 0,
				modalName: null,
				scrollAnimation: 300
			};
		},
		components: {
			wanlShopClassify
		},
		computed: {
			...mapState(['common', 'statistics', 'cart'])
		},
		onLoad() {
			let wanlsys = this.$wanlshop.wanlsys();
			// #ifdef APP-PLUS
			this.height = wanlsys.windowHeight + wanlsys.windowBottom - wanlsys.height;
			// #endif
			// #ifdef H5
			this.height = wanlsys.windowHeight + wanlsys.windowBottom - wanlsys.height - 50;
			// #endif
			// #ifdef MP
			this.height = wanlsys.windowHeight - wanlsys.height;
			// #endif
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			});
			// #endif
		},
		methods: {
			// 弹出层
			showModal(name) {
				// 滚动下分享
				if (name == 'share' && this.modalName != 'share') {
					setTimeout(() => {
						this.scrollAnimation = 0;
					}, 300);
				}
				this.modalName = name;
			},
			hideModal(name) {
				if (name) {
					this.showModal(name);
				} else {
					// 强制关闭海报
					if (this.modalName == 'share') {
						this.$refs.wanlShare.closePoster();
					}
					this.modalName = null;
				}
			},
			handleGroups() {
				this.$wanlshop.to('/pages/apps/groups/index');
			},
			productSearch(text) {
				this.$wanlshop.to(`/pages/page/search?type=goods&keywords=${text}`, 'fade-in', 100);
			},
			//禁止父元素滑动 1.0.3升级
			moveHandle() {}
		}
	};
</script>

<style>
	.cu-custom .cu-bar {
		z-index: 99;
	}

	.cu-bar .action {
		position: relative;
	}

	/* #ifdef MP */
	.cu-bar .search-form {
		margin: 0 0 0 25rpx;
	}

	/* #endif */
	
	.top-bg {
		background-color: #E6E8F7;
	}
	
	.search-img {
		flex-shrink: 0;
		margin-left: 25rpx;
		width: 36rpx;
		height: 40rpx;
		margin-right: 30rpx;
	}
</style>